<script setup>
import {computed, shallowRef} from "vue";
import MyIcon from "../components/MyIcon.vue";
import {ElNotification} from "element-plus";
import {PROJECT_INFO, PROJECT_NAME, PROJECT_SKILLS} from "../const";
import router from "../router";
import MyList from "../components/MyList.vue";
import {LOCAL_RES} from "../util/index.js";

// 当前登录的员工信息
const emp = JSON.parse(sessionStorage.getItem('loginEmp'));
// 当前登录的员工头像
// let avatar = MINIO_HOST + '/avatar/' + emp['avatar'];
emp['avatar'] = 'logo.png';

/* ==================== 权限菜单 ==================== */
// 当前选中权限的index值：默认选中当前路由路径
let currentMenuIndex = shallowRef(router.currentRoute.value['path']);
// 左侧权限列表是否折叠：向左收缩
const isCollapse = shallowRef(false);
// 当前登录的员工的菜单列表
const menus = JSON.parse(sessionStorage.getItem('loginMenus'));

/* ==================== 项目信息 ==================== */
const projectInfoDrawer = shallowRef();
let projectInfoItems = [
  {'label': '项目标题', 'value': PROJECT_INFO.title},
  {'label': '项目作者', 'value': PROJECT_INFO.author},
  {'label': '项目版本', 'value': PROJECT_INFO.version, 'type': 'tag', 'tagType': 'primary'},
  {'label': '后端地址', 'value': PROJECT_INFO.host},
  {'label': '前端地址', 'value': PROJECT_INFO.webHost},
  {'label': '文档地址', 'value': PROJECT_INFO.docHost},
  {'label': '接口统计', 'value': PROJECT_INFO.getApi, 'type': 'tag', 'prefix': 'GET - '},
  {'label': '接口统计', 'value': PROJECT_INFO.postApi, 'type': 'tag', 'prefix': 'POST - ',},
  {'label': '项目描述', 'value': PROJECT_INFO.info, 'type': 'card'},
];

function openProjectInfoDrawer() {
  projectInfoDrawer.value = true;
}

/* ==================== 项目技术栈 ==================== */
const projectSkillDrawer = shallowRef();
let projectSkillItems = [
  {'label': '底层操作系统', 'value': 'Windows 11'},
  {'label': '语言开发环境', 'value': 'JDK 11.0.16.1'},
  {'label': '集成开发工具', 'value': 'IntelliJ IDEA 2021.3.3 Ultimate Edition'},
  {'label': '项目管理工具', 'value': 'Maven 3.6.0'},
  {'label': '版本控制工具', 'value': 'Git 2.28.0.windows.1'},
  {'label': '代码托管中心', 'value': 'GitEE latest'},
  {'label': '前端服务容器', 'value': 'Node 16.14.0'},
  {'label': '前端测试软件', 'value': 'Edge 120.0.2210.77'},
  {'label': '压力测试工具', 'value': 'JMeter 5.4.1'},
  {'label': '虚拟管理工具', 'value': 'VmWare 16.2.1 build-18811642'},
  {'label': '虚拟操作系统', 'value': 'CentOS x86_64-Minimal-1611'},
  {'label': '容器管理引擎', 'value': 'Docker 18.06.3-ce, build d7080c1'},
  {'label': '数据存储仓库', 'value': 'MySQL 8.0.25'},
  {'label': '对象存储仓库', 'value': 'MinIO RELEASE.2023-08-31T15-31-16Z'},
  {'label': '文档存储仓库', 'value': 'MongoDB 6.0.3'},
  {'label': '数据缓存仓库', 'value': 'Redis 7.0.5'},
  {'label': '消息队列组件', 'value': 'RabbitMQ 3.11.2-management'},
  {'label': '反向代理组件', 'value': 'Nginx 1.23.2'},
  {'label': '搜索引擎组件', 'value': 'ElasticSearch 7.11.2'},
  {'label': '搜索引擎界面', 'value': 'Kibana 7.11.2'},
  {'label': '日志收集组件', 'value': 'Logstash 7.11.2'},
  {'label': '短信服务平台', 'value': '阿里云SMS短信平台'},
  {'label': '云端对象存储', 'value': '阿里云OSS对象存储'},
];

function openProjectSkillDrawer() {
  projectSkillDrawer.value = true;
}

/* ==================== 系统日历 ==================== */
const calendarDrawer = shallowRef();
let calendarData = shallowRef(new Date());

function openCalendarDrawer() {
  calendarDrawer.value = true;
}

/* ==================== 系统通知 ==================== */
function notify() {
  ElNotification.info({
    title: '通知列表',
    message: '暂无通知消息',
    position: 'bottom-right',
  })
}

/* ==================== 路径跳转 ==================== */
function toPersonal() {
  router.push('/Personal');
}

function toPersonalUpdate() {
  router.push('/PersonalUpdate');
}

/* ==================== 退出登录 ==================== */
function logout() {
  router.push('/');
}

</script>

<template>
  <el-container class="main-body">
    <el-aside class="main-body-left" width="collapse" max-width="200px">
      <el-menu class="permissions-menu el-menu-vertical-demo" unique-opened router
               :collapse="isCollapse" :default-active="currentMenuIndex">
        <el-image class="logo" :src="LOCAL_RES('../assets/image/logo.png')"/>
        <el-menu-item class="house-item" index="/DashBoard" title="回到后台项目首页">
          <my-icon icon="House" label="DashBoard"/>
        </el-menu-item>

        <el-sub-menu class="menus" v-for="(menu, i) in menus"
                     :key="menu['id']" :index="i.toString()" :title="menu['info']">
          <template #title>
            <my-icon :icon="menu['icon']" :label="menu['name']"/>
          </template>

          <el-menu-item class="sub-menus" v-for="subMenu in menu['subMenus']"
                        :key="subMenu['id']" :index="subMenu['url']" :title="subMenu['info']">
            <my-icon :icon="subMenu['icon']" :label="subMenu['name']"/>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container class="main-body-right">
      <el-header class="main-body-right-head">
        <el-row class="is-align-middle">
          <el-col class="fold-expand" :span="2">
            <el-radio-group v-model="isCollapse">
              <el-radio-button :label="!isCollapse">
                <my-icon :size="20" :icon="!isCollapse ? 'Fold' : 'Expand'"/>
              </el-radio-button>
            </el-radio-group>
          </el-col>

          <el-col class="project-title-col" :span="7">{{ PROJECT_NAME }}</el-col>

          <el-col class="operation-btn-col" :span="6" :offset="7">
            <el-divider direction="vertical"/>
            <el-button icon="search" title="全局搜索" size="small" round @click=""/>
            <el-button icon="bell" title="系统通知" size="small" round @click="notify"/>
            <el-button icon="list" title="项目信息" size="small" round @click="openProjectInfoDrawer"/>
            <el-button icon="list" title="项目技术栈" size="small" round @click="openProjectSkillDrawer"/>
            <el-button icon="calendar" title="系统时间" size="small" round @click="openCalendarDrawer"/>
            <el-divider direction="vertical"/>
          </el-col>

          <el-col class="emp-name-col" :span="1" v-if="emp['name']">{{ emp['name'] }}</el-col>

          <el-col class="emp-avatar-col" :span="1" v-if="emp['avatar']">
            <el-dropdown trigger="click">
            <span class="el-dropdown-link">
              <el-avatar class="emp-avatar" :size="45" :src="'../src/assets/image/logo.png'"/>
            </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item icon="InfoFilled" @click="toPersonal">查看个人信息</el-dropdown-item>
                  <el-dropdown-item icon="Edit" @click="toPersonalUpdate">修改个人信息</el-dropdown-item>
                  <el-dropdown-item icon="WarnTriangleFilled" @click="logout">
                    <el-text type="danger">退出登录</el-text>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </el-col>
        </el-row>
      </el-header>

      <el-main class="main-body-right-main">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>

  <el-drawer class="calendar-drawer" title="当前时间" v-model="calendarDrawer" size="50%">
    <el-calendar v-model="calendarData"/>
  </el-drawer>

  <el-drawer class="project-info-drawer" v-model="projectInfoDrawer" size="40%">
    <my-list title="项目系统信息" :items="projectInfoItems"/>
  </el-drawer>

  <el-drawer class="project-info-drawer" v-model="projectSkillDrawer" size="40%">
    <my-list title="项目技术栈信息" :items="projectSkillItems"/>
  </el-drawer>

</template>

<style scoped lang="scss">
.main-body-left {

  height: 100vh; // 高度
  border-right: 1px solid #cccccc; // 右边框
  text-align: center;
  .logo {
    width: 80%;
    margin: 20px auto 0;
  }

  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px; // 宽度
    height: 100vh; // 高度
    letter-spacing: 2px; // 字间距
  }

  .el-icon {
    margin: 0 10px; // 上下外边距 左右外边距
  }
}

.main-body-right-head {

  .project-title-col {
    font-weight: bolder; // 加粗
    font-size: 1.5rem; // 字号倍率
  }

  .emp-name-col {
    text-align: right; // 右对齐
    height: 50px; // 高度
    display: inline-block; // 内联块
    text-shadow: 2px 2px 2px gray; // 文字阴影
    line-height: 50px; // 行高
  }

  .emp-avatar-col {
    text-align: right; // 右对齐
  }

  .emp-avatar {
    margin: 10px; // 外边距
    outline: 1px solid #854040; // 边框
    border: 1px solid #854040; // 边框
  }
}
</style>